<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol {
      list-style: none;
    }

    .lunbo {
      position: relative;
      width: 880px;
      height: 550px;
      border: 1px solid #333;
      margin: 20px auto;
    }

    .lunbo .pic li {
      position: absolute;
      left: 0;
      top: 0;
      width: 880px;
      height: 550px;
      display: none;
    }

    .lunbo .pic .current {
      display: block;
    }

    /* 按钮 */
    .lunbo .btn a {
      position: absolute;
      top: 50%;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      background-color: rgba(255, 255, 255, 0.3);
      font: 20px/40px "宋体";
      text-align: center;
      color: #fff;
      text-decoration: none;
      font-weight: bold;
    }

    .lunbo .btn .leftbtn {
      left: 20px;
    }

    .lunbo .btn .rightbtn {
      right: 20px;
    }

    .lunbo .btn a:hover {
      background-color: rgba(255, 255, 255, 0.6);
    }

    /* 下标 */
    .lunbo .sub {
      position: absolute;
      left: 100px;
      bottom: 50px;
      width: 240px;
    }

    .lunbo .sub li {
      float: left;
      width: 20px;
      height: 20px;
      margin-right: 20px;
      background-color: rgba(255, 255, 255, 0.4);
      font: 12px/20px "微软雅黑";
      text-align: center;
      color: #666;
      cursor: pointer;
    }

    .lunbo .sub .current {
      background-color: #fff;
    }
  </style>
</head>

<body>
  <!-- 轮播图大结构 -->
  <div class="lunbo" id="lunbo">
    <!-- 图片部分 -->
    <ul class="pic" id="pic">
      <li class="current"><img src="images/lunbo/c1.jpg"></li>
      <li><img src="images/lunbo/c2.jpg"></li>
      <li><img src="images/lunbo/c3.jpg"></li>
      <li><img src="images/lunbo/c4.jpg"></li>
      <li><img src="images/lunbo/c5.jpg"></li>
      <li><img src="images/lunbo/c6.jpg"></li>
    </ul>
    <!-- 按钮 -->
    <div class="btn">
      <a href="javascript:;" class="leftbtn" id="leftbtn">&lt;</a>
      <a href="javascript:;" class="rightbtn" id="rightbtn">&gt;</a>
    </div>
    <!-- 小圆点 -->
    <ol class="sub" id="sub">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ol>
  </div>

  <script>
    //题目：给 part1-模块2-任务1 的轮播图静态页面添加JS事件，让其成功滚动
    // 需要实现效果：
    // 1、实现点击左右按钮切换图片
    // 2、图片自动轮播
    // 3、点击下方指示灯可以切换到对应的图片
    // 4、鼠标移上轮播图题停止轮播，离开继续轮播

    // 思路：
    // 1、从html和css代码可以发现，实际上，图片的轮播现实和隐藏是通过更改类名实现的，那么我需要做的就是当需要切换图片的时候只需要更改需要更改的类名就可以了
    // 2、点击左右按钮切换图片和点击底部指示灯实际上是给按钮添加onclick事件
    // 3、鼠标移上停止自动轮播需要给大盒子添加onmouseover事件，删除自动轮播的定时器
    // 4、鼠标移开开始轮播只需要给大盒子添加onmouesout事件，创建定时器
    // 5、这中间必须有一个变量-信号量，来作为媒介，把需要渲染的图片和指示灯的下标赋值给这个信号量（因为图片和指示灯是一一对应的，所以只需要一个值就可以）

    //获取元素，大盒子、图片列表、左右按钮、指示灯列表
    var lunbo = document.getElementById('lunbo'),
      pic = document.getElementById('pic'),
      pileftbtnc = document.getElementById('leftbtn'),
      rightbtn = document.getElementById('rightbtn'),
      sub = document.getElementById('sub'),
      //获取全部的图片成为一个数组
      imgs = pic.children,
      //获取全部的指示灯，并成为一个数组
      tips = sub.children,
      //信号量，初始值为0
      me = 0;
    //创建定时器，默认的效果其实就是点击右侧按钮的效果，我们直接在这里触发右按钮的click事件即可，每3秒触发一次
    var timer = setInterval(function () {
      //触发rightbtn的点击事件
      rightbtn.click();
    }, 3000)
    //rightbtn按钮点击事件
    rightbtn.onclick = function () {
      //调用run函数修改信号量，并传入一个参数（这个参数是什么都可以）
      run(true);
      //调用chongzhi函数执行渲染操作，
      chongzhi();
    }
    //leftbtn的点击事件，原理同上
    leftbtn.onclick = function () {
      //注意：这里不要传入参数
      run();
      chongzhi();
    }
    //轮播图的鼠标移入事件
    lunbo.onmouseover = function () {
      //删除定时器
      clearInterval(timer);
    }
    //鼠标移除轮播图事件
    lunbo.onmouseout = function () {
      //新建定时器
      timer = setInterval(function () {
        rightbtn.click();
      }, 3000)
    }
    //给循环遍历指示灯数组，底部每个指示灯添加onclick事件
    for (let i = 0; i < tips.length; i++) {
      //添加click事件
      tips[i].onclick = function () {
        //把信号量改为自己的下标
        me = i;
        //调用chongzhi函数渲染
        chongzhi();
      }
    }
    //修改信号量函数，如果有参数，代表我们想要下一张，如果参数为空代表我们想要上一张
    //参数：可以是任意值也可以为空
    function run(x) {
      //判断是否有参数
      if (x) {
        //如果有参数，代表我们想轮播到下一张图片，再判断是否当前图片已经是最后一张了，
        if (me >= imgs.length - 1) {
          //如果当前图片已经是最后一张了，修改信号值为0
          me = 0
        } else {
          // 如果不是做后一张，信号值自增
          me++
        }
      } else {
        //如果没有传入参数，代表我们想要轮播上一张图片，再判断当前图片是否已经是第一张了，如果是第一张，修改信号值为最后一张的下标
        if (me <= 0) {
          me = imgs.length - 1;
        } else {
          // 如果不是最后一张，信号子自减
          me--;
        }
      }
    }
    //图片排他渲染函数
    //功能：把所有的图片列表和指示灯列表的类名全部清空，再把需要的元素类名添加上去
    function chongzhi() {
      for (let i = 0; i < imgs.length; i++) {
        imgs[i].className = '';
        tips[i].className = '';
      }
      //利用信号量，执行修改类名操作
      imgs[me].className = 'current';
      tips[me].className = 'current';
    }
  </script>
</body>

</html>